import { defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import CardView from "@/components/CardView";
import Text from "@/components/Text";
import ButtonView from "@/components/ButtonView";
import { useRequest } from "./request";
import MessageItem from "@/components/Message/item";
import ExpandMore from "@/components/ExpandMore";
import Phone from "@/components/Phone";
import phone from "./asset/phone.png";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import BackgroundPlate from "@/components/BackgroundPlate";
import GreyBlock from "@/components/GreyBlock";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import MessageCard from "@/components/MessageCard";
import { getUserTypeValue, isDh, phoneNumControl } from "@/command/apiTool";
import { Steps, Step } from "vant";
import { useRouter } from "vue-router";
import TextView from "@/components/TextView";
import { Popup } from "vant";
import PopTitle from "@/components/PopTitle";
import PopCheck from "@/components/PopupCheck";
import * as vant from "vant";
const { showFailToast } = vant;

export default defineComponent({
  name: "",
  setup() {
    const router = useRouter();
    const {
      listOpen,
      listAllYes,
      listTaskPartake,
      accept,
      refuse,
      memberList,
    } = useRequest();
    const popup = ref(false);
    const checkId = ref("");
    const render1 = () => {
      // console.log('listOpen', listOpen)
      return (
        <CardView title="我的保供任务">
          <ExpandMore
            class="border-bottom-color selector-name"
            onClick={() => router.push("/supplyTaskList")}
          >
            {listOpen.value.map((e: any) => {
              const button: IButtonGroupViewData[] = (
                [
                  {
                    display: e.partakeFlag == "0",
                    text: "拒绝",
                    onClick: () => {
                      refuse(e.id, "2");
                    },
                  },
                  {
                    display: e.partakeFlag == "0",
                    text: getUserTypeValue() == "dh" ? "参与" : "接受",
                    onClick: () => {
                      if (isDh()) {
                        popup.value = true;
                        checkId.value = e.id;
                      } else {
                        accept(e.id, "1");
                      }
                    },
                  },
                  {
                    display: e.partakeFlag == "1",
                    childClass: "!bg-[#E9EFFF] !text-[#3B97FF]",
                    text: getUserTypeValue() == "dh" ? "已参与" : "已接受",
                  },
                  {
                    display: e.partakeFlag == "2",
                    text: "已拒绝",
                    childClass: "!bg-[#c7c7c7]",
                  },
                ] as IButtonGroupViewData[]
              ).filter((e) => (e.display == undefined ? true : e.display));
              return (
                <div
                  onClick={() =>
                    router.push(`/supplyTaskListDetail?id=${e.id}`)
                  }
                >
                  <div class={"flex items-center justify-between"}>
                    <GreyBlock class="justify-between">
                      <MessageItem
                        text={e.title}
                        iconSize={12}
                        showRight={false}
                      />
                    </GreyBlock>
                    <div>
                      <RoundEdgeButtonGroup data={button} />
                    </div>
                  </div>
                  <TextView class="mt-[20px]" limitedNumber={3}>
                    {e.content}
                  </TextView>
                </div>
              );
            })}
          </ExpandMore>
        </CardView>
      );
    };
    const render2 = () => {
      return (
        <CardView
          title="分配任务"
          right={() => <ButtonView>一键分配</ButtonView>}
        >
          {/* <div class={"horizontal"}>
            {data2.value!.list.map((e) => {
              return (
                <IconText
                  class={"icon-text-col mr-[28px]"}
                  text="陈江河"
                  url="https://img2.baidu.com/it/u=2591611833,3173732768&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677603600&t=8846eaf285073349c0a9f2604a14e884"
                  iconSize={42}
                />
              );
            })}
          </div> */}
        </CardView>
      );
    };
    const render3 = () => {
      const messages = listTaskPartake.value.map((e: any) => {
        let maskedPhoneNumber = phoneNumControl(e.phone);
        return {
          text: `用户${maskedPhoneNumber}响应号召，积极参...`,
          time: e.timeAgo,
        };
      });
      return <MessageCard data={messages} class={"mt-[10px]"} />;
    };
    // const render4 = () => {
    //   return (
    //     <CardView title="保供任务">
    //       <Message data={data4.value.list} />
    //     </CardView>
    //   );
    // };
    const render5 = () => {
      const data = listAllYes.value.map((e: any) => {
        return {
          name: e.title,
          value: e.partakeDate,
        };
      });
      return (
        <CardView title="保供记录" class={"mt-[10px]"}>
          <Steps direction="vertical">
            {data.map((e) => {
              return (
                <Step>
                  <div class={"flex justify-between text-[#666] text-[12px]"}>
                    <div>{e.name}</div>
                    <div>{e.value}</div>
                  </div>
                </Step>
              );
            })}
          </Steps>
        </CardView>
      );
    };
    const render6 = () => {
      return (
        <div class="flex items-center justify-center !mt-[37px] mb-[20px]">
          <img src={phone} class={"w-[20px] h-[20px] mr-[10px]"} />
          <span class={"flex items-center"}>
            <span class="text-[#999999] text-[14px]">
              热线电话:
              <Phone phone="0574-21338675" />
            </span>
          </span>
        </div>
      );
    };
    const oneKey = () => {
      let checkIdList = memberList.value.filter((e: any) => e.isCheck);
      let checkIds = checkIdList.map((e: any) => e.userId).join(",");
      console.log("checkIds", checkIds);
      if (!checkIds) {
        showFailToast("请选择要分配的小户");
        return;
      }
      accept(checkId.value, "1", checkIds);
      popup.value = false;
    };
    const renderCheckPop = () => {
      return (
        <Popup
          v-model:show={popup.value}
          round
          position="bottom"
          class={"!mt-[0px]"}
        >
          <PopTitle title="选择小户" />
          <PopCheck data={memberList.value} />
          <div
            class="h-[64px] w-full flex items-center justify-center px-[14px] box-border"
            style={{ boxShadow: "0px 0px 6px 1px rgba(0,0,0,0.16)" }}
          >
            <ButtonView class="!h-[40px]" block onClick={() => oneKey()}>
              一键分配
            </ButtonView>
          </div>
        </Popup>
      );
    };
    return () => {
      return (
        <PageTitle title="帮保供">
          <BackgroundPlate>
            {render1()}
            {/* render2() */}
            {render3()}
            {/* render4() */}
            {render5()}
            {render6()}
            {isDh() && renderCheckPop()}
          </BackgroundPlate>
        </PageTitle>
      );
    };
  },
});
